<template>
  <div>
    <h3>Item组件</h3>
    <p v-if="paramsId === '001'">英雄联盟</p>
    <p v-if="paramsId === '002'">穿越火线</p>
    <p v-if="paramsId === '003'">逆战</p>
  </div>
</template>
<script>
export default {
  name: 'Item',
  data() {
    return {
      paramsId: '',
    };
  },
  watch: {
    // 我们可以使用watch来监听动态路由的切换
    $route: {
      immediate: true,
      // 不需要deep，因为动态路由切换的时候，直接替换整个route对象
      handler() {
        console.log(this.$route);
        this.paramsId = this.$route.query.id;
      },
    },
  },
};
</script>
<style></style>
